<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实训三 课外拓展1</title>
    <style type="text/css">
        h3{
            color: red;
            text-align: center;
        }
        ul{
            width: 520px;
            height: 150px;  /* 如果此处将height设置为100px 更加的好看一些 */
            /* height: 100px; */
            list-style-type: none;
            text-align: center;
            margin: 0 auto;
        }
        li{
            /* inline-block是元素具备了两种（块级和内联）元素的功能，
            inline最重要的一点就是：元素能够在一行展示，而inline元素所缺失的设置宽高，也是block元素的功能，
           从而两个联手，展现出了如图的效果。 */
            display: inline-block; 
            width: 120px;
            height: 30px;
        }
        img{
            width: 100px;
            height: 100px;
            border: 0px;
        }
        /* #ul1{
            margin-top: 5px;
        }
        #ul1 li{
            display: inline-block;
            padding-top: 3px;
            margin-top: 0px;
        } */
    </style>
</head>
<!-- 这里的图片下面的文字，还可以使用figure配合figcaption 但是使用的a标签需要调节字体大小 -->
<body>
    <h3>桂林风景展览</h3>
    <div>
        <ul>
            <li><a href="../../img/water/image31.jpg"><img src="../../img/water/image31.jpg" alt=""></a></li>
            <li><a href="../../img/water/image32.jpg"><img src="../../img/water/image32.jpg" alt=""></a></li>
            <li><a href="../../img/water/image33.jpg"><img src="../../img/water/image33.jpg" alt=""></a></li>
            <li><a href="../../img/water/image34.jpg"><img src="../../img/water/image34.jpg" alt=""></a></li>
        </ul>
        <ul id="ul1">
            <li><a href="../../img/water/image31.jpg">桂林风景1</a></li>
            <li><a href="../../img/water/image32.jpg">桂林风景2</a></li>
            <li><a href="../../img/water/image33.jpg">桂林风景3</a></li>
            <li><a href="../../img/water/image34.jpg">桂林风景4</a></li>
        </ul>
    </div>
</body>
</html>